import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xin_he/routes/xin_he_routes.dart';

import '../../../utils/xh_styles.dart';
import '../../../utils/xin_he_UI_constancs.dart';
import '../../../utils/xin_he_image.dart';
import '../xin_he_mine_cloud_cha_zi/xin_he_assets_account_list_item_entity.dart';
import 'xin_he_mine_left_money_logic.dart';

class XinHeMineLeftMoneyPage extends StatelessWidget {
  XinHeMineLeftMoneyPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeMineLeftMoneyLogic());
  final state = Get.find<XinHeMineLeftMoneyLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
      appBar: AppBar(
        leading: IconButton(
            onPressed: (){
              Get.back();
            },
            icon: Container(
              padding: const EdgeInsets.only(left: 7),
              alignment: Alignment.centerLeft,
              child: const XinHeAssetImage(
                'assets/images/home/app_back_3.png',
                width: 9.5,
                height: 17,
                fit: BoxFit.cover,),
            )
        ),
        backgroundColor: Colors.white,
        shadowColor: Colors.transparent,
        title: Text('余额',style: TextStyle(color:XinHeColor('#222222'),fontSize: 17,fontWeight: FontWeight.w600)),
        centerTitle: true,
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(height: 15,),
          ///当前余额
          Stack(children: [
            Positioned(
                left: 15,
                top: 0,
                child: XinHeAssetImage('assets/images/mine/left_bg.png',width: Get.width-30,height: (Get.width-30)*128/345,)),
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 15),
              padding: const EdgeInsets.symmetric(horizontal: 15),
              height: (Get.width-30)*128/345,
              // color: Colors.red,
              child: Row(children: [
                ///左边
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    const SizedBox(height: 10,),
                    Text('当前余额',style: TextStyle(color: XinHeColor('#FEFEFE'),fontSize: 11,fontWeight: FontWeight.w500),),
                    const SizedBox(height: 10,),
                    Text('${logic.assetsModel.value.total}',style: TextStyle(color: XinHeColor('#FEFEFE'),fontSize: 17,fontWeight: FontWeight.w500),),
                    const Spacer(),
                    RichText(text: TextSpan(children: [
                      TextSpan(text:'已提现金额：',style: TextStyle(color: XinHeColor('#B3EBEB'),fontSize: 12,fontWeight: FontWeight.w500)),
                      TextSpan(text: '${logic.assetsModel.value.withdrawal}',style: TextStyle(color: Colors.white,fontSize: 12,fontWeight: FontWeight.w500),),

                    ]),),
                    const SizedBox(height: 15,),

                  ],),
                Spacer(),
                SizedBox(
                  width: 54,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [

                      GestureDetector(
                        onTap:(){
                          Get.toNamed(XinHeRoutes.withdraw);
                        },
                        child: Container(
                          width:54,
                          height: 21,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(10.5)),
                          child: Text('提现',style: TextStyle(color: XinHeColor('#49BBBB'),fontSize: 11,fontWeight: FontWeight.w500),),
                        ),
                      ),

                      const SizedBox(height: 15,),
                      GestureDetector(
                        onTap: (){
                          Get.toNamed(XinHeRoutes.withdrawRecords);
                        },
                        child: Container(
                          width:54,
                          height: 21,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(color: Colors.transparent,borderRadius: BorderRadius.circular(10.5),border: Border.all(color: Colors.white,width: 0.5)),
                          child: Text('提现记录',style: TextStyle(color: XinHeColor('#F1FFFF'),fontSize: 11,fontWeight: FontWeight.w500),),
                        ),
                      )

                    ],),
                )
              ],),
            ),
          ],),
          const SizedBox(height: 20,),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15),
            child: Text('余额明细',style: TextStyle(color: XinHeColor('#333333'),fontSize: 14,fontWeight: FontWeight.w600),),
          ),
          const SizedBox(height: 10,),
          Expanded(child: ListView.separated(
            itemCount: logic.dataList.length,
            itemBuilder: (ctx,index){
              XinHeAssetsAccountListItemEntity model = logic.dataList[index];

              return _itemView(model);
            }, separatorBuilder: (BuildContext context, int index) { return SizedBox(height: 10,); },))
        ],),
    ));
  }

  Widget _itemView(XinHeAssetsAccountListItemEntity model){
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 15),
      height: 66,
      padding: const EdgeInsets.symmetric(horizontal: 15),
      decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(5)),
      child: Row(children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
          Text(XinHeGetStrClass.getTradeString(model.tradeType??''),style: TextStyle(color: XinHeColor('#333333'),fontSize: 13,fontWeight: FontWeight.w500),),
          const SizedBox(height: 10,),
          Text( model.createTime??'',style: TextStyle(color: XinHeColor('#999999'),fontSize: 11,fontWeight: FontWeight.w500),),



        ],),
        const Spacer(),
        Text('${model.tradeAmount??''}',style: TextStyle(color: XinHeColor('#EB5029'),fontSize: 13,fontWeight: FontWeight.w500),),
      ],),
    );
  }
}
